package card

import "github.com/templui/templui/internal/utils"

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type HeaderProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type TitleProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type DescriptionProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type ContentProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type FooterProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

templ Card(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"w-full rounded-lg border bg-card text-card-foreground shadow-xs",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Header(props ...HeaderProps) {
	{{ var p HeaderProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex flex-col space-y-1.5 p-6 pb-0",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Title(props ...TitleProps) {
	{{ var p TitleProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<h3
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"text-lg font-semibold leading-none tracking-tight",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</h3>
}

templ Description(props ...DescriptionProps) {
	{{ var p DescriptionProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<p
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"text-sm text-muted-foreground",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</p>
}

templ Content(props ...ContentProps) {
	{{ var p ContentProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"p-6",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Footer(props ...FooterProps) {
	{{ var p FooterProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex items-center p-6 pt-0",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}
